import { width, height } from '../options/size'
import { ports } from '../options/ports'
import { Shape, Dom, Node } from '@antv/x6'

/**线条矩形节点 */
export const LineRect: Node.Definition = Shape.Rect.define({
  shape: 'LineRect',
  width: width,
  height: height,
  attrs: {
    body: {
      strokeWidth: 1,
      stroke: '#5F95FF',
      fill: '#ffffff'
    },
    fo: {
      refWidth: '100%',
      refHeight: '100%'
    },
    foBody: {
      xmlns: Dom.ns.xhtml,
      style: {
        width: '100%',
        height: '100%',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
      }
    },
    'edit-text': {
      contenteditable: 'true',
      class: 'x6-edit-text',
      style: {
        width: '100%',
        textAlign: 'center',
        fontSize: 12,
        color: 'rgba(0,0,0,0.85)'
      }
    },
    text: {
      fontSize: 12,
      fill: '#080808'
    }
  },
  markup: [
    {
      tagName: 'rect',
      selector: 'body'
    },
    {
      tagName: 'text',
      selector: 'text'
    },
    {
      tagName: 'foreignObject',
      selector: 'fo',
      children: [
        {
          ns: Dom.ns.xhtml,
          tagName: 'body',
          selector: 'foBody',
          children: [
            {
              tagName: 'div',
              selector: 'edit-text'
            }
          ]
        }
      ]
    }
  ],
  ports: ports
})
